<script setup lang="ts">
import { createPopper } from '@popperjs/core'
import { ref, onMounted, h } from 'vue'
import type { ButtonInstance } from './components/Button/types'
import Button from './components/Button/Button.vue'
import Item from './components/Collapse/CollapseItem.vue'
import Collapse from './components/Collapse/Collapse.vue'
import Icon from './components/Icon/Icon.vue'
import Alert from './components/Alert/Alert.vue'
import Tooltip from './components/Tooltip/Tooltip.vue'
import type { TooltipInstance } from './components/Tooltip/types'
import Dropdown from './components/Dropdown/Dropdown.vue'
import type { MenuOption } from './components/Dropdown/types'
import GemsDropdown from './components/Dropdown/Dropdown'
import Message from './components/Message/Message.vue'
import { createMessage } from './components/Message/method'


const messageInstance = createMessage({type:'success', message:'Success',duration:3000})
createMessage({type:'success', message:' two', duration:0})
createMessage({type:'success', message:' three', duration:0})


const myButton = ref<ButtonInstance>()

const openedValue = ref(['a'])

const tooltipRef = ref<TooltipInstance>()
const open = () => {
  // tooltipRef.value?.show()
  console.log('open')
  createMessage({ message: 'hello world', duration: 0, showClose: true })
}
const close = () => {
  tooltipRef.value?.hide()
}

const inlineConsole = (...args: any) => {
  console.log(...args)
}

const trigger = ref<any>('hover')
const options: MenuOption[] = [
  { key: 1, label: h('b', 'this is bold') },
  { key: 2, label: 'item2', disabled: true },
  { key: 3, label: 'item3', divided: true },
  { key: 4, label: 'item4' }
]



const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');

  // 传递按钮、工具提示和一些选项，Popper 将执行
  // 神奇的定位
createPopper(button as Element, tooltip as HTMLElement, {
  placement: 'right',
});

onMounted(() => {
  // console.log('mounted')
  if (myButton.value) {
    // console.log(myButton.value.ref)
  }

  setTimeout(() => {
    // openedValue.value = ['b']
    // messageInstance.destroy()
  }, 3000)
})
</script>

<template>

  <header>

    <!-- <Message type="success" message="Success Message" showClose> </Message> -->

    <Tooltip content="tooltip content" manual ref="tooltipRef" :options="{ placement: 'top' }" transition="fade">
      <img class="logo" src="./assets/logo.svg" alt="" width="100" height="80" />
    </Tooltip>
    <br />
    <Tooltip placement="right" content="tooltip content" trigger="hover" :open-delay="1000" >
      <img class="logo" src="./assets/logo.svg" alt="" width="100" height="80" />
      <template #content>
        <h1>This is a custom content</h1>
      </template>
    </Tooltip>
    <br />

    <Dropdown 
      placement="bottom" 
      :trigger="trigger" 
      :menu-options="options"
      @visible-change="e => inlineConsole('visible change', e)"
      @item-click="e => inlineConsole('select', e)"
      ref="tooltipRef"
    >
      <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125"/>
    </Dropdown>

    <GemsDropdown 
      placement="bottom" 
      :trigger="trigger" 
      :menu-options="options"
      @visible-change="e => inlineConsole('visible change', e)"
      @item-click="e => inlineConsole('select', e)"
      manual
      ref="tooltipRef"
    >
      <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125"/>
    </GemsDropdown>


  </header>

  <button id="button" aria-describedby="tooltip">I'm a button</button>
  <div id="tooltip" role="tooltip">I'm a tooltip</div>
  <!-- <FontAwesomeIcon :icon="faCoffee" /> -->
  <Icon icon="arrow-up" size="2x" type="primary" />

  <Button type="success" plain ref="myButton" @click="open">Hello World</Button> <br /><br />
  <Button ref="buttonRef" @click="close">Test Button</Button>
  <Button plain>Plain Button</Button>
  <Button round>Round Button</Button>
  <Button circle>gems</Button>
  <Button disabled>Disabled Button</Button><br /><br />
  <Button type="primary">Primary</Button>
  <Button type="success">Success</Button>
  <Button type="info">Info</Button>
  <Button type="warning">Warning</Button>
  <Button type="danger">Danger</Button><br /><br />
  <Button type="primary" plain>Primary</Button>
  <Button type="success" plain>Success</Button>
  <Button type="info" plain>Info</Button>
  <Button type="warning" plain>Warning</Button>
  <Button type="danger" plain>Danger</Button><br /><br />
  <Button size="large">Large</Button>
  <Button size="medium">Medium</Button>
  <Button size="small">Small</Button><br /><br />
  <Button size="large" loading>Loading</Button>
  <Button size="large" icon="arrow-up">Icon</Button><br /><br />

  <Collapse v-model="openedValue">
    <Item name="a" title="Title A">
      <h1>headline title</h1>
      <div>this is content a aaa</div>
    </Item>
    <Item name="b" title="Title B">
      <div>this is bbbbb test</div>
    </Item>
    <Item name="c" title="Disabled Title" disabled>
      <div>this is cccc test</div>
    </Item>
  </Collapse>
  {{ openedValue }}

  <br /><br />

  <Alert effect="light" type="danger" content="Danger Message"></Alert>
  <Alert type="success">this is the alert</Alert>
  <Alert type="warning">this is the alert</Alert>
  <Alert type="info">this is the alert</Alert>
  <Alert type="danger">this is the alert</Alert>
  <Alert type="success" effect="dark">this is the alert</Alert>
  <Alert type="warning" effect="dark">this is the alert</Alert>
  <Alert type="info" effect="dark">this is the alert</Alert>
  <Alert type="danger" effect="dark">this is the alert</Alert>

  <br /><br />

</template>

<style>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  border: 1px solid green;
}
.vk-tooltip__popper {
  border: 1px solid red;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
